<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>

  <!--[if lt IE 8]>
    <div class="alert alert-warning">
      <?php _e('You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.', 'roots'); ?>
    </div>
  <![endif]-->

  <?php
    do_action('get_header');
    get_template_part('templates/header');
  ?>

    <main class="joke">
      <div class="container" role="main">
        <?php include roots_template_path(); ?>
      </div><!-- /.main -->
    </main><!-- /.content -->
  
  <?php get_template_part('templates/footer'); ?>
  <div id="goup"></div>
  <input type="hidden" id="next-page" value="2" autocomplete="off" />
    <div id="loading" class="load" style="background:#fff;">
        <img src="<?php echo get_template_directory_uri() ?>/assets/img/spinner.gif" /><?php //_e("Loading","roots"); ?>
    </div>
  <script type="text/template" id="joke-template">
  <% _.each(items,function(item){ %>   
    <li data-id="<%= item.ID %>" class="joke item">
        <a href="<%= item.author_url %>"><img src="<%= item.author_avatar %>" class="user" /></a>
        <div class="post">
            <h3>
                <a href="<%= item.author_url %>"><%= item.author_name %></a>
                <time datetime="<%= item.post_date %>"><%= item.post_date %></time>
            </h3>
            <%= item.post_content %>
            <div class="interaction">
                <a href="<%= item.url %>" class="comment"><span class="glyphicon glyphicon-comment"></span><?php _e('Comment','roots'); ?>(<span
                        class="comment-count"><%= item.comments_count %></span>)</a>
            </div>
        </div>
    </li>
     <% }); %>
  </script>
  <script type="text/javascript">
  (function () {
      'use strict';
      if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement('style')
        msViewportStyle.appendChild(
          document.createTextNode(
            '@-ms-viewport{width:auto!important}'
          )
        )
        document.querySelector('head').appendChild(msViewportStyle)
      }
    })();
    (function($){
        'use strict';
        moment.locale('zh-cn'); 
        var ajaxUrl = "<?php echo admin_url( 'admin-ajax.php' ); ?>",
            jokesTemplate = _.template($("#joke-template").html()),
            i=0;

        function formatTime() {
            $(".stream li time").each(function (i, item) {
                var self = $(item);
                if (!self.hasClass('formatted')) {
                    self.addClass('formatted');
                    self.text(moment(self.attr('datetime')).fromNow());
                }
            });

        }

        function loadJokes() {
            var nextPage = $("#next-page").val();
            if (nextPage > 0) {
                $("#loading").show();
                $.getJSON(ajaxUrl, {
                    action: 'get_jokes',
                    page: nextPage,
                    last: $(".stream li:first").data('id')
                }, function (data) {
                    $(".stream").append(jokesTemplate(data));
                    $("#loading").hide();
                    formatTime();
                    if(data.hasNext){
                        $("#next-page").val(data.next);
                    }else{
                        $("#next-page").val(-1);
                    }
                });
            } else {
                // TODO: no more
            }
        }
        formatTime();
        $("#goup").goup({
            hideUnderWidth: 300,
            marginY: 3
        });
        if($("#jokes-list").length){
            $("#footer").bind('enterviewport', loadJokes).bullseye();
        }
        $(".media-list .comment").each(function(i,item){
            $(".comment-floor",item).text('#'+(i+1));
        });
        /*
        var myElement = document.querySelector("#header");
        var headroom  = new Headroom(myElement);
        headroom.init(); 
        */
    })(jQuery);
  </script>
</body>
</html>
